<template>
  <div class="pay">
    <p class="flex pd20 between bg_fff mtb20 col_bbb">
      <span>订单金额</span>
      <span>￥ {{orderTotal}}</span>
    </p>
    <div class="payway">
      <div class="item bor_t flex start"
           @click="change(0)">
        <div>
          <img src="../../assets/image/card.jpg"
               width="40">
        </div>
        <span>会员卡</span>
        <div class="t-r">
          <icon :type="this.active===0? 'success' :'circle'"></icon>
        </div>
      </div>
      <div class="item bor_t flex start"
           @click="change(1)">
        <div>
          <img src="../../assets/image/wechat.png"
               width="30">
        </div>
        <span>微信</span>

        <div class="t-r">
          <icon :type="this.active===1? 'success' :'circle'"></icon>
        </div>
      </div>

    </div>
    <div class="fixbtn flex"
         @click="pay">
      支付
    </div>
    <toast v-model="toastshow"
           type="text"
           width="200px"
           position="moddle">{{mesg}}</toast>
    <confirm v-model="confirmshow"
             title="提示"
             @on-confirm="gopay">
      <p class="t-c">会员卡剩余次数：{{user.residueTimes}}次</p>
      <p class="t-c">消耗次数：{{days}}次</p>
      <p class="t-c">是否确认定会员卡支付？</p>
    </confirm>
  </div>
</template>
<script>
import * as API from '../../api'
import { Icon, Confirm, Toast } from 'vux'
import { mapGetters } from 'vuex'
export default {
  components: {
    Icon, Confirm, Toast
  },
  data () {
    return {
      active: 0,
      orderId: '',
      toastshow: false,
      confirmshow: false,
      days: '',
      mesg: '',
      user: '',
      path: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.orderTotal = this.$route.query.orderTotal
    this.orderId = this.$route.query.orderId
    this.days = this.$route.query.days,
      this.sign = this.$route.query.isOrder,
      this.$http.get(API.user, {
        params: {
          openId: this.userInfo.openId
        }      }).then(res => {
        this.user = res.data
      }).catch(err => {
        console.log(err)
      })
  },
  methods: {
    change (type) {
      this.active = type
    },
    pay () {
      if (this.active === 0) {
        this.confirmshow = true
      } else {
        const that = this
        this.$http.get(API.payForOrder, {
          params: {
            orderId: this.orderId,
            payMethod: this.active
          }        }).then(res => {
          if (res.data.code === 500) {
            this.toastshow = true
            this.mesg = res.data.msg
          } else if (res.data.code === 2) {
            console.log('微信支付')
            console.log(res.data)
            const order = res.data.order
            that.$uniquePay
              .wechatPay({
                appId: order.appId,
                timeStamp: order.timeStamp,
                nonceStr: order.nonceStr,
                signType: order.signType,
                paySign: order.paySign,
                package: order.packageValue
              })
              .then(res => {
                console.log("微信支付成功");

                this.$router.push({ path: '/orderdet', query: { orderId: this.orderId } })
              })
              .catch(err => {
                console.log(err)
              })
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    gopay () {
      this.$http.get(API.payForOrder, {
        params: {
          orderId: this.orderId,
          payMethod: this.active
        }      }).then(res => {
        if (res.data.code === 500) {
          this.toastshow = true
          this.mesg = res.data.msg
        } else if (res.data.code === 0) {
          console.log('会员卡支付成功')
          this.$router.push({ path: '/orderdet', query: { orderId: this.orderId } })
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    if (this.sign) {
      localStorage.setItem('sign', this.orderId)
      next()
    } else {
      next()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.payway {
  .item {
    padding: 20px;
    background-color: #fff;
    img {
      margin-right: 30px;
    }
    div:first-child {
      width: 20%;
      text-align: center;
      // width: 80%;
      // background-color: pink;
    }
    div:last-child {
      flex-grow: 1;
      // width: 80%;
      // background-color: pink;
    }
  }
}
</style>
